<!--
 * @Files: 
 * @Version: 1.0
 * @Author: wanglu
 * @Date: 2020-03-17 09:41:33
 * @LastEditors: wangzhichiao<https://github.com/wzc570738205>
 * @LastEditTime: 2020-05-10 16:01:19
 -->
<template>
  <div>
    <div class="navwrap">
      <div class="nav">
        <div class="navitem">项目列表</div>
        <div class="btn" @click="$router.push({ path: '/home' })">项目总览</div>
        <div class="btn" @click="$router.go(-1)">返回</div>
      </div>
    </div>
    <div class="home">
      <el-row :gutter="10" style="margin-bottom:10px;">
        <el-col :span="7">
          <div class="box1">
            <div class="title">
              >>项目信息
            </div>
            <p
              style="color:#fff;    margin: 0;
    line-height: 1.9;"
            >
              结构类型：框架同体结构<br />

              项目经理：徐天航<br />

              项目名称：湖南洞庭湖水库引水工程施工I标
            </p>
            <div class="infowrap">
              <div class="info">
                <div class="div-title">总建设面积</div>
                <div class="div-text">13899124m²</div>
              </div>
              <div class="info">
                <div class="div-title">总项目数量</div>
                <div class="div-text" style="color: rgb(68, 184, 119);">
                  300个
                </div>
              </div>
            </div>
            <div class="line">
              <el-progress
                :text-inside="true"
                :show-text="false"
                :stroke-width="24"
                :percentage="50"
                status="warning"
              ></el-progress>
              <div class="box">
                <div style="    color: #eab416;">
                  已施工（天）<br />
                  <span>117</span>
                </div>
                <div>总工期（天）<br /><span>245</span></div>
              </div>
            </div>
          </div>
        </el-col>
        <el-col :span="17">
          <div class="box1">
            <baidu-map
              class="map"
              :zoom="zoom"
              center="赫章"
              :scroll-wheel-zoom="true"
            >
              <bm-marker
                :position="{ lng: 116.25029, lat: 39.5402 }"
                :dragging="true"
              >
              </bm-marker>
              <bm-overlay pane="labelPane" class="sample" @draw="draw">
                <div><i @click="clickmap" class="fa fa-building"></i></div>
              </bm-overlay>
            </baidu-map>
          </div>
        </el-col>
      </el-row>

      <el-row :gutter="10">
        <el-col :span="7">
          <div class="box2">
            <div class="title">
              >>在场人员统计
            </div>
            <div class="divwrap">
              <div class="div">
                <div class="div-title">管理人员</div>
                <div class="div-text">39</div>
              </div>
              <div class="div">
                <div class="div-title">劳务人员</div>
                <div class="div-text" style="color: rgb(68, 184, 119);">39</div>
              </div>
            </div>

            <div class="title">
              >>近7日出工统计
            </div>
            <div
              id="containerLIne2"
              style="border-radius: 20px;
    background: #1d2848;height: 175px"
              ref="containerLIne2"
            ></div>
            <div style="text-align:center;color:red;padding-top:5px;">
              - 共1条人员预警 -
            </div>
          </div>
        </el-col>
        <el-col :span="5">
          <div class="box2">
            <div class="title">
              >>智能监督设备统计
            </div>
            <div class="zxbox">
              <div class="title">
                智能监督设备数量(总)：
              </div>
              <div class="number">95</div>
            </div>
            <div class="zxbox">
              <div class="title">
                今日告警数量(总)：
              </div>
              <div class="number" style="color: #eab416">39</div>
            </div>
            <div class="zxbox2">
              <div class="div">
                <div class="title">塔吊</div>
                <div class="num">告警：21</div>
              </div>
              <div class="div">
                <div class="title">升降机</div>
                <div class="num">告警：4</div>
              </div>
              <div class="div">
                <div class="title">施工电梯</div>
                <div class="num">告警：3</div>
              </div>
              <div class="div">
                <div class="title">高支模</div>
                <div class="num">告警：11</div>
              </div>
              <div class="div">
                <div class="title">基坑监测</div>
                <div class="num">告警：1</div>
              </div>
              <div class="div">
                <div class="title">智能烟感</div>
                <div class="num">告警：8</div>
              </div>
            </div>
          </div>
        </el-col>
        <el-col :span="5">
          <div class="box2">
            <div class="title">
              >>现场物料统计
            </div>
            <div class="wlbox">
              <div class="left">收料车次</div>
              <div class="right">
                <div>今日：7次</div>
                <div>本月：172次</div>
              </div>
            </div>
            <div class="wlbox">
              <div class="left">过磅重量</div>
              <div class="right">
                <div>今日：9吨</div>
                <div>本月：2900吨</div>
              </div>
            </div>
            <div class="wlbox">
              <div class="left">移动点检</div>
              <div class="right">
                <div>今日：3</div>
                <div>本月：9</div>
              </div>
            </div>
          </div>
        </el-col>
        <el-col :span="7">
          <div class="box2">
            <div class="title">
              >>现场问题统计
            </div>
            <p style="margin:5px 0;color:#fff">
              累积发现问题(总)：
              <span style="color:#eab416">12</span> 项，已整改
              <span style="color: rgb(68, 184, 119);">18</span> 项
            </p>
            <el-progress
              :text-inside="true"
              :show-text="false"
              :stroke-width="24"
              :percentage="50"
              status="success"
            ></el-progress>
            <div
              id="containerLIne3"
              style="border-radius: 20px;
			  margin-top:10px;
    background: #1d2848;height: 230px"
              ref="containerLIne3"
            ></div>
          </div>
        </el-col>
      </el-row>
    </div>
  </div>
</template>
<script>
import leftNav from "../../layout/components/leftNav/leftNav";
import echarts from "echarts";

export default {
  name: "Home",
  data() {
    return {
      zoom: 15,
      center: { lng: 116.25029, lat: 39.5402 },

      active: "home",
      chartData: {
        columns: ["日期", "访问用户", "下单用户", "下单率"],
        rows: [
          { 日期: "1/1", 访问用户: 1393, 下单用户: 1093, 下单率: 0.32 },
          { 日期: "1/2", 访问用户: 3530, 下单用户: 3230, 下单率: 0.26 },
          { 日期: "1/3", 访问用户: 2923, 下单用户: 2623, 下单率: 0.76 },
          { 日期: "1/4", 访问用户: 1723, 下单用户: 1423, 下单率: 0.49 },
          { 日期: "1/5", 访问用户: 3792, 下单用户: 3492, 下单率: 0.323 },
          { 日期: "1/6", 访问用户: 4593, 下单用户: 4293, 下单率: 0.78 },
        ],
      },
    };
  },
  components: {
    leftNav,
  },
  mounted() {
    // this.line();
    this.line2();
    this.line3();
  },
  computed: {},
  methods: {
    line() {
      var dom = this.$refs.containerLIne; //document.getElementById("container");

      var myChart = echarts.init(dom);
      var app = {};
      var option = null;

      option = {
        color: ["#fe0200", "#44b877", "#3333ff", "#fec107"],
        tooltip: {
          trigger: "axis",
        },
        grid: {
          top: "20px",
          containLabel: true,
        },
        legend: {
          data: ["在建项目", "完成验收", "立项中", "招标中"],
          textStyle: {
            color: "#fff",
          },
          x: "center", // 'center' | 'left' | {number},
          y: "245", // 'center' | 'bottom' | {number}
        },

        toolbox: {
          show: false,
          feature: {
            dataZoom: {
              yAxisIndex: "none",
            },
            dataView: { readOnly: false },
            magicType: { type: ["line", "bar"] },
            restore: {},
            saveAsImage: {},
          },
        },
        xAxis: {
          type: "category",
          data: ["第一季度", "第二季度", "第三季度", "第四季度"],
          axisLabel: {
            margin: 2,
            textStyle: {
              color: "#fff",
            },
          },
        },
        yAxis: {
          type: "value",
          axisLabel: {
            margin: 2,
            textStyle: {
              color: "#fff",
            },
          },
        },
        series: [
          {
            name: "在建项目",
            data: [15, 68, 90, 46],
            type: "bar",
          },
          {
            name: "完成验收",

            data: [78, 90, 34, 46],
            type: "bar",
          },
          {
            name: "立项中",

            data: [67, 72, 4, 56],
            type: "bar",
          },
          {
            name: "招标中",

            data: [88, 17, 74, 46],
            type: "bar",
          },
        ],
      };

      if (option && typeof option === "object") {
        myChart.setOption(option, true);
      }
    },
    line2() {
      var dom = this.$refs.containerLIne2; //document.getElementById("container");

      var myChart = echarts.init(dom);
      var app = {};
      var option = null;

      option = {
        color: ["#3e8cdd", "#44b877", "#3333ff", "#fec107"],
        tooltip: {
          trigger: "axis",
        },
        grid: {
          top: "50px",
          left: "50px",
          right: "15px",
          bottom: "50px",
          height: "95px",
        },
        legend: {
          data: ["在建项目", "完成验收", "立项中", "招标中"],
          textStyle: {
            color: "#fff",
          },
          x: "center", // 'center' | 'left' | {number},
          y: "245", // 'center' | 'bottom' | {number}
        },

        toolbox: {
          show: false,
          feature: {
            dataZoom: {
              yAxisIndex: "none",
            },
            dataView: { readOnly: false },
            magicType: { type: ["line", "bar"] },
            restore: {},
            saveAsImage: {},
          },
        },
        xAxis: {
          type: "category",
          data: ["5日", "6日", "7日", "8日", "9日", "10日", "11日"],

          axisLabel: {
            margin: 2,
            textStyle: {
              color: "#fff",
            },
          },
        },
        yAxis: {
          type: "value",
          axisLabel: {
            margin: 2,
            textStyle: {
              color: "#fff",
            },
          },
          name: "人员",
          nameTextStyle: {
            color: "#fff",
          },
        },
        series: [
          {
            name: "在建项目",
            data: [100, 240, 170, 120, 160, 170, 190],

            type: "line",
          },
        ],
      };

      if (option && typeof option === "object") {
        myChart.setOption(option, true);
      }
    },
    line3() {
      var dom = this.$refs.containerLIne3; //document.getElementById("container");

      var myChart = echarts.init(dom);
      var app = {};
      var option = null;

      option = {
        color: ["#16c65f", "#0291da", "#3333ff", "#fec107"],
        tooltip: {
          trigger: "axis",
        },
        grid: {
          top: "50px",
          left: "50px",
          right: "15px",
          bottom: "50px",
          height: "160px",
        },

        toolbox: {
          show: false,
          feature: {
            dataZoom: {
              yAxisIndex: "none",
            },
            dataView: { readOnly: false },
            magicType: { type: ["line", "bar"] },
            restore: {},
            saveAsImage: {},
          },
        },
        xAxis: {
          type: "category",
          data: ["现场围挡", "封闭管理", "施工场地", "耗材管理", "现场防火"],
          axisLabel: {
            margin: 2,
            textStyle: {
              color: "#fff",
            },
          },
        },
        yAxis: {
          type: "value",
          axisLabel: {
            margin: 2,
            textStyle: {
              color: "#fff",
            },
          },
          name: "数量",
          nameTextStyle: {
            color: "#fff",
          },
        },
        series: [
          {
            name: "总问题",
            data: [15, 68, 90, 46, 4],
            type: "bar",
          },
          {
            name: "已解决",

            data: [7, 56, 34, 46, 4],
            type: "bar",
          },
        ],
      };

      if (option && typeof option === "object") {
        myChart.setOption(option, true);
      }
    },
    draw({ el, BMap, map }) {
      const pixel = map.pointToOverlayPixel(
        new BMap.Point(104.712733, 27.117008)
      );
      el.style.left = pixel.x - 60 + "px";
      el.style.top = pixel.y - 20 + "px";
	},
	 clickmap() {
            this.$router.push({ path: "/project/detail" });

    },
  },
};
</script>

<style lang="scss" scoped>
  .sample {
      position: absolute;
      z-index: 9;

      font-size: 30px;
      cursor: pointer;
      color: red;
    }
    .sample:hover {
      color: #3e8cdd;
    }
.navwrap {
  width: 100%;
  padding: 0 10px;
  display: flex;
  justify-content: space-between;
      
  .nav {
    height: 30px;
    display: flex;
    align-items: flex-end;
    background-size: 100% 100%;
    .navitem {
      width: 155px;
      height: 30px;
      font-size: 16px;
      color: #fff;
      line-height: 30px;
      text-align: center;
      background: url(../../assets/images/images/项目整体预览/项目概览_u5.png)
        no-repeat;
      cursor: pointer;
    }
    .btn {
      height: 20px;
      padding: 0 10px;
      line-height: 20px;
      margin: 0 10px;
      text-align: center;
      background: #3e8cdd;
      border-radius: 5px;
      font-weight: 400;
      font-style: normal;
      font-size: 14px;
      color: #ffffff;
      cursor: pointer;
    }
  }
}

.home {
  padding: 10px;

  .box1 {
    width: 100%;
    height: 300px;
    box-sizing: border-box;
    border-width: 2px;
    border-style: solid;
    border-color: rgb(0, 51, 102);
    padding: 5px 10px;
  }
  .map {
    width: 100%;
    height: 100%;
  }
  .title {
    color: rgb(62, 140, 221);
    font-size: 16px;
    padding-bottom: 5px;
  }
  .divwrap {
    display: flex;
    justify-content: space-around;
    padding: 5px 0;

    .div {
      width: 45%;
      height: 70px;
      background: url(../../assets/images/images/项目总览/u85.png) no-repeat;
      background-size: 100% 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-direction: column;
      .div-title {
        color: #fff;
        font-family: "Arial Normal", Arial;
        font-weight: 600;
      }
      .div-text {
        font-size: 28px;
        color: rgb(234, 180, 22);
      }
    }
  }

  .box2 {
    width: 100%;
    height: 330px;
    box-sizing: border-box;
    box-shadow: none;
    background: inherit inherit inherit inherit inherit inherit inherit inherit
      inherit;
    border-width: 2px;
    border-style: solid;
    border-color: rgb(0, 51, 102);
    border-radius: 0px;
    padding: 5px 10px;
  }
  .infowrap {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    .info {
      width: 48%;
      height: 80px;
      margin: 10px 0;
      box-shadow: none;
      background: #1d2848;
      border-width: initial;
      border-style: none;
      border-color: initial;
      border-image: initial;
      border-radius: 20px;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-direction: column;
      .div-title {
        color: #fff;
        font-family: "Arial Normal", Arial;
        font-weight: 600;
      }
      .div-text {
        font-size: 20px;
        padding-top: 15px;
        color: rgb(234, 180, 22);
      }
    }
  }
  .zxbox {
    width: 95%;
    margin: 10px auto;
    height: 40px;
    box-shadow: none;
    background: #1d2848;
    border-width: initial;
    border-style: none;
    border-color: initial;
    border-image: initial;
    border-radius: 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 10px;
    .title {
      color: #fff;
      font-family: "Arial Normal", Arial;
      font-weight: 600;
    }
    .number {
      font-size: 36px;
      color: rgb(68, 184, 119);
    }
  }
  .zxbox2 {
    width: 90%;
    margin: 10px auto;
    height: 180px;

    box-shadow: none;
    background: #1d2848;
    border-width: initial;
    border-style: none;
    border-color: initial;
    border-image: initial;
    border-radius: 20px;
    display: flex;
    align-items: center;
    padding: 10px;
    flex-wrap: wrap;
    justify-content: space-around;
    .div {
      width: 34%;
      .title {
        color: #fff;
        font-family: "Arial Normal", Arial;
        font-weight: 600;
      }
      .num {
        height: 16px;
        padding-top: 10px;
        color: rgb(234, 180, 22);
      }
    }
  }
  .wlbox {
    width: 90%;
    margin: 15px auto;
    display: flex;
    align-items: center;
    padding: 0 10px;
    justify-content: space-between;

    .left {
      width: 70px;
      height: 70px;
      border-radius: 50%;
      background: #1d2848;
      color: #fff;
      text-align: center;
      line-height: 70px;
    }
    .right {
      color: #fff;
      font-size: 16px;
      width: 130px;
      div {
        padding: 10px 0;
        padding-left: 25px;
      }
    }
  }
  /deep/ {
    .el-progress-bar__outer {
      background-color: #496082;
    }
  }
  .line {
    border-radius: 20px;
    background: rgb(29, 40, 72);
    height: 80px;
    padding: 10px;
    -webkit-tap-highlight-color: transparent;
    user-select: none;
    position: relative;
    .box {
      display: flex;
      color: #fff;
      justify-content: space-between;
      padding: 0 10px;
      > div {
        padding: 5px;
        span {
          padding-top: 2px;
          display: block;
        }
      }
    }
  }
}
</style>
